﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2016-2021 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Blob!</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="There is a blob on my map!" />
  <meta name="keywords" content="OpenLayers,ol,blob,canvas,animation,effect,interaction" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <link rel="stylesheet" href="../style.css" />

  <style>
    .options b {
      display: block;
      width: 100%;
      border-bottom: 2px solid currentColor;
      margin: 1em 0 .5em;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Blob!</h1>
  </a>
  <p class="info">
    There is a blob on my map!
    <br/>
    The <i>ol/interaction/Blob</i> adds a clip interaction with a blob on a layer.
  </p>

  <!-- DIV pour la carte -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <ul><li>
      <label>
        <input type="checkbox" checked="checked" onchange="terrain.setVisible($(this).prop('checked'));">
        hide background
      </label>
    </li><li>
      <label>
        <input type="checkbox" onchange="blob.set('action', $(this).prop('checked')?'onclick':'');">
        on click
      </label>
    </li><li>
      <b>Kinetic</b>
    </li><li>
      stiffness: <input type="range" min="3" max="50" value="20" onchange="blob.set('stiffness', Number(this.value))">
    </li><li>
      damping: <input type="range" min="1" max="15" value="7" onchange="blob.set('damping', Number(this.value))">
    </li><li>
      mass: <input type="range" min="1" max="5" value="1" onchange="blob.set('mass', Number(this.value))">
    </li><li>
      <b>Blob</b>
    </li><li>
      radius: <input id="radius" type="range" min="30" max="200" value="70" onchange="blob.setRadius(Number(this.value))">
    </li><li>
      points: <input type="range" min="3" max="30" value="10" onchange="blob.set('points', Number(this.value))">
    </li><li>
      fuss: <input type="range" min=".1" max="2" value="1" step=".1" onchange="blob.set('fuss', Number(this.value))">
    </li><li>
      amplitude: <input type="range" min=".1" max="6" value="1" step=".1" onchange="blob.set('amplitude', Number(this.value))">
    </li><li>
      tension: <input type="range" min="0" max="1" value=".5" step=".1" onchange="blob.set('tension', Number(this.value))">
    </li></ul>
    <p>
      <i>Move around to show the map!</i>
    </p>
  </div>
  
  <script type="text/javascript">
  // Layers
  var terrain = new ol.layer.Tile({
    title:'terrain-background',
    source: new ol.source.StadiaMaps({ layer: 'stamen_terrain' })
  });
  terrain.addFilter(new ol.filter.Colorize({ operation:'luminosity', value: .45 }))
  var stamen = new ol.layer.Tile({
    source: new ol.source.StadiaMaps({ layer: 'stamen_watercolor' }) 
  });

  // The map
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      zoom: 10,
      center: [256697, 6249708]
    }),
    layers: [terrain, stamen]
  });

  // Blob interaction
  var blob = new ol.interaction.Blob({ radius: Number($("#radius").val()), layers:stamen });
  map.addInteraction(blob);

  </script>
  
</body>
</html>